<template>
  <el-dialog title="部门列表" :width="'80%'" :model-value="show" @update:model-value="close">
    <pf-table
      class="pf-mt-20"
      :config="deptConfig"
      :data="deptDatas"
      @selection-change="selectionChange"
      :page-param="pageParam"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
      @current-page-change="pageChange"
    >
    </pf-table>
    <template #footer>
      <div class="pf-text-right">
        <el-button type="primary" @click="confirmSel">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, Ref, toRefs, watch } from 'vue';
import { emptyTable, TableModel, useData } from 'pf-component';
import { TableNameEnum } from '@/constants/enum/table-name.enum';
import { useOrg } from '@/components/user/use-org';
import { useNotice } from '@/components/element-plus/notice';

export default defineComponent({
  name: 'DeptListDialog',
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    multi: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    notNull: {
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const { message } = useNotice();
    const multi = toRefs(props).multi;
    const notNull = toRefs(props).notNull;
    const deptDatas: Ref<any[]> = ref([]);
    const deptConfig: Ref<TableModel> = ref(emptyTable);
    const pageParam: any = reactive({ total: 0, pageSize: 10, pageNum: 1 });
    const pageChange = (val: number) => {
      pageParam.pageNum = val;
      useOrg()
        .effectDeptList(pageParam)
        .then(res => {
          deptDatas.value = res.records || [];
          pageParam.total = res.total || 0;
        });
    };
    const pageSizeChange = (val: number) => {
      pageParam.pageSize = val;
      useOrg()
        .effectDeptList(pageParam)
        .then(res => {
          deptDatas.value = res.records || [];
          pageParam.total = res.total || 0;
        });
    };
    onMounted(() => {
      Promise.all([
        useData().loadTable([{ name: TableNameEnum.sysDept, config: deptConfig }])
      ]).then(ress => {
        if (ress.findIndex(res => !res) === -1) {
          deptConfig.value.checkbox();
        }
      });
    });
    const selectedFieldList: Ref<any[]> = ref([]);
    const selectionChange = (selection: any[]) => {
      selectedFieldList.value = selection;
    };
    const confirmSel = () => {
      if (!selectedFieldList.value || !selectedFieldList.value.length) {
        if (notNull.value) {
          message.error('please select record!');
          return;
        }
      }
      if (!multi.value && selectedFieldList.value.length > 1) {
        message.error('please select one record!');
        return;
      }
      emit('confirm', selectedFieldList.value);
    };
    const cancel = () => {
      emit('close');
    };
    const close = () => {
      emit('close');
    };
    watch(
      () => props.show,
      show => {
        if (show) {
          useOrg()
            .effectDeptList(pageParam)
            .then(res => {
              deptDatas.value = res.records || [];
              pageParam.total = res.total || 0;
            });
        }
      }
    );
    return {
      pageParam,
      pageSizeChange,
      pageChange,
      deptDatas,
      deptConfig,
      selectionChange,
      confirmSel,
      cancel,
      close
    };
  }
});
</script>

<style scoped></style>
